/*
 * @Author: zoufengfan
 * @Date: 2022-10-17 14:03:18
 * @LastEditTime: 2022-11-04 14:15:15
 * @LastEditors: zoufengfan
 */

import { CloseCircleFilled } from '@ant-design/icons';
import React, { ReactNode,  useEffect, useRef, useState } from 'react';
import "antd/es/date-picker/style";
import './index.less';
type IsFocus = [boolean, boolean];

type Prop = {
  style?: React.CSSProperties;
  value?: [string, string];
  onChange?: Function;
  placeholder?: [string, string];
  separator?: ReactNode;
  onFocus?: (e: React.FocusEvent<HTMLInputElement>, isFocus: IsFocus) => void;
  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
  onClear?: () => void;
  prefix?: ReactNode;
  suffix?: ReactNode;
  allowClear?: boolean;
  activePickerIndex?: number;
};

export default function InputRange(prop: Prop) {
  const {
    style,
    value,
    onChange,
    placeholder,
    separator,
    onFocus,
    onBlur,
    prefix,
    suffix,
    activePickerIndex = 0,
    onClear,
    allowClear = true,
  } = prop;
  const [inputArr, setinputArr] = useState<[string | undefined, string | undefined]>(
    value ? value : [undefined, undefined],
  );
  const [_activePickerIndex, set_activePickerIndex] = useState(activePickerIndex || 0);
  const [activeBarWidth, setactiveBarWidth] = useState<number>(0);
  // const [activeBarLeft, setactiveBarLeft] = useState<number>(0);
  const [isFocus, setisFocus] = useState<IsFocus>([false, false]);
  const [canclose, setcanclose] = useState(true);

  const _onFocus = (e: React.FocusEvent<HTMLInputElement>, focusVal: IsFocus) => {
    setcanclose(false);
    console.log([e.target], e.target.offsetWidth);
    setactiveBarWidth(e.target.offsetWidth);
    // setactiveBarLeft(e.target.offsetLeft);
    set_activePickerIndex(focusVal.findIndex((el) => el));
    setisFocus(focusVal);
    onFocus?.(e, focusVal);
  };

  const inputOnBlur = (_e: React.FocusEvent<HTMLInputElement>, index: number) => {
    setisFocus([false, false]);
  };

  const handleClear = () => {
    console.log(inputArr);

    setinputArr([undefined, undefined]);
    onClear?.();
  };

  useEffect(() => {
    set_activePickerIndex(activePickerIndex);
  }, [activePickerIndex]);

  useEffect(() => {
    onChange?.(inputArr);
  }, [inputArr]);

  useEffect(() => {
    if (Array.isArray(value)) {
      if (value[0] === inputArr[0] && value[1] === inputArr[1]) return;
      const arr = value.map((v) => v);
      setinputArr(arr as [string, string]);
    }
  }, [value]);

  return (
    <label
      className={
        'input-range ant-picker ant-picker-range' +
        (isFocus.some((e) => e) ? ' ant-picker-focused' : '')
      }
      style={style || {}}
      onMouseLeave={() => setcanclose(true)}
      onBlur={(e) => canclose && onBlur?.(e)}
    >
      <span className="ant-picker-prefix">{prefix}</span>
      {/* ant-picker-input-active */}
      <div className="ant-picker-input ">
        <input
          // ref={inputRef1.current}
          placeholder={placeholder?.[0]}
          size="12"
          autoComplete="off"
          value={inputArr[0] || ''}
          onChange={(e) => setinputArr((arr) => [e.target.value, arr[1]])}
          onFocus={(e) => _onFocus(e, [true, false])}
          onBlur={(e) => inputOnBlur(e, 0)}
        />
      </div>
      <div className="ant-picker-range-separator">
        <span aria-label="to" className="ant-picker-separator">
          {separator || (
            <span role="img" aria-label="swap-right" className="anticon anticon-swap-right">
              <svg
                viewBox="0 0 1024 1024"
                focusable="false"
                data-icon="swap-right"
                width="1em"
                height="1em"
                fill="currentColor"
                aria-hidden="true"
              >
                <path d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"></path>
              </svg>
            </span>
          )}
        </span>
      </div>
      <div className="ant-picker-input">
        <input
          // ref={inputRef2.current}
          placeholder={placeholder?.[1]}
          size="12"
          autoComplete="off"
          value={inputArr[1] || ''}
          onChange={(e) => setinputArr((arr) => [arr[0], e.target.value])}
          onFocus={(e) => _onFocus(e, [false, true])}
          onBlur={(e) => inputOnBlur(e, 1)}
        />
      </div>

      {/* 下方横线 */}
      <div
        className="ant-picker-active-bar"
        style={{
          left: (activeBarWidth + 32) * _activePickerIndex + 'px',
          width: activeBarWidth + 'px',
          position: 'absolute',
        }}
      ></div>

      {/* 后方icon */}
      <span className="ant-picker-suffix">{suffix}</span>

      {/* 清除按钮 */}
      {allowClear && (
        <span
          className="ant-picker-clear"
          style={{
            display: inputArr?.[0] && inputArr?.[1] ? 'inline' : 'none',
          }}
          onClick={() => handleClear()}
        >
          <CloseCircleFilled />
        </span>
      )}
    </label>
  );
}
